<script setup lang="ts">
import { ref, reactive, onMounted, toRefs, watch } from 'vue'
import { timeFormat, toYuan, copyToCliboard, timeFormat_2, timeFormatYMD } from '@/hooks/util'
import { message } from 'ant-design-vue'
import * as templateApi from '../../../api/template'
import AddRule from './AddTemplateRule.vue'

interface SearchParams {
  currentPage: number
  pageSize: number
  channel: number
  [propName: string]: any
}

interface Pagination {
  page: number
  pageSize: number
  total: number
  current?: number
  onChange: Function
  showSizeChanger: boolean
}

const props = defineProps({
  templateId: String,
  type: Number,
})

const newTemplateId = ref('')

const { templateId, type } = toRefs(props)

const handlePageChange = (page: any, pageSize: any) => {
  pagination.value.pageSize = pageSize
  searchParams.value.pageSize = pageSize
}
const pagination = ref<Pagination>({
  page: 1,
  pageSize: 10,
  total: 0,
  onChange: handlePageChange,
  showSizeChanger: true,
})

const searchParams = ref<SearchParams>({
  channel: type?.value, // 闲鱼
  currentPage: pagination.value.page,
  pageSize: pagination.value.pageSize,
  ruleName: '',
  quotationType: '',
})

const addRuleRef = ref()
const AddTemplateRef = ref()
const WeCahtRef = ref()

onMounted(() => {
  // getList()
})

let loading = ref<boolean>(false)

//渠道下拉框
const changeTicketChannel = (e: any) => {
  if (!e) {
    delete searchParams.value.quotationType
  }
}
const quotationTypeList = ref([
  {
    label: '比例',
    value: '1',
  },
  {
    label: '减法',
    value: '2',
  },
  {
    label: '固定金额',
    value: '3',
  },
  {
    label: '溢价',
    value: '4',
  },
])

// 查询
const search = () => {
  pagination.value.current = 1
  searchParams.value.currentPage = 1
  getList()
}

// 重置
const reset = () => {
  pagination.value.current = 1
  searchParams.value.currentPage = 1
  searchParams.value.ruleName = ''
  searchParams.value.ticketChannel = ''

  getList()
}

const dataSource = ref([])
const columns = [
  {
    title: '规则信息',
    key: 'ruleName',
    width: 360,
  },
  {
    title: '报价信息',
    key: 'price',
    width: 400,
  },
  {
    title: '影片类型',
    key: 'planType',
    width: 300,
  },
  {
    title: '省份/城市',
    key: 'province',
    width: 400,
  },
  {
    title: '影院/影厅',
    key: 'fileHall',
    width: 400,
  },
  {
    title: '影片/票数/包含院线',
    key: 'filmName',
    width: 400,
  },
  {
    title: '日期/时间/排除院线',
    key: 'beginShowTime',
    width: 400,
  },
  {
    title: '首选/备选渠道',
    key: 'matchChannel',
    width: 530,
  },
  {
    title: '操作',
    key: 'action',
    width: 150,
    fixed: 'right',
  },
]

// 翻页
const changePage = (e: any) => {
  pagination.value.current = e.current
  pagination.value.pageSize = e.pageSize
  searchParams.value.currentPage = pagination.value.current as number
  getList()
}

const getList = async () => {
  loading.value = true
  try {
    let { state, data, message: msg } = await templateApi.getListByZyRuleList(searchParams.value)
    if (state === 200) {
      dataSource.value = data.list.map((item: any) => {
        item.statusFlag = false
        return item
      })
      pagination.value.total = Number(data.totalCount)
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
  loading.value = false
}
//删除规则
const delRule = async (id: any) => {
  try {
    let {
      state,
      data,
      message: msg,
    } = await templateApi.deleteTemplateZyRule({
      id: id,
      groupId: newTemplateId.value,
    })
    if (state === 200) {
      message.success('删除成功')
      getList()
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
//添加规则
const addRule = () => {
  addRuleRef.value.showModal(newTemplateId.value, {}, 3)
}

//编辑规则
const edit = (record: any) => {
  addRuleRef.value.showModal(newTemplateId.value, record, 3)
}

// 过滤
const getFilterlist = (list: Array<any> = [], type: number) => {
  if (list.length > 0) {
    // console.log('list', list.filter(item => item.containStatus == type))

    return list.filter(item => item.containStatus == type)
  } else {
    return []
  }
}

defineExpose({
  getList,
})

watch(
  () => ({ ...props }),
  (newVal, oldVal) => {
    if (newVal.templateId) {
      newTemplateId.value = newVal.templateId
      searchParams.value.groupId = newTemplateId.value
      getList()
    }
  },
  { deep: true, immediate: true },
)
</script>

<template>
  <a-card style="overflow-x: scroll">
    <AddRule ref="addRuleRef" @refresh="getList"></AddRule>

    <div class="header"></div>

    <div class="searchBox">
      <a-form ref="formRef" layout="inline" :model="searchParams">
        <a-form-item label="名称" name="ruleName">
          <a-input v-model:value="searchParams.ruleName" placeholder="名称" />
        </a-form-item>

        <a-form-item label="渠道" name="ticketChannel">
          <a-select
            v-model:value="searchParams.quotationType"
            placeholder="渠道"
            style="width: 150px"
            allowClear
            @change="changeTicketChannel"
          >
            <a-select-option
              v-for="(item, index) in quotationTypeList"
              :key="index"
              :value="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" @click="search">搜索</a-button>
          <a-button @click="reset">重置</a-button>
          <a-button type="primary" style="margin-left: 10px" @click="addRule">添加规则</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div style="height: 20px"></div>
    <a-table
      style="overflow-x: scroll"
      :columns="columns"
      :data-source="dataSource"
      :pagination="pagination"
      :loading="loading"
      @change="changePage"
      rowKey="id"
      size="small"
      :scroll="{ x: 100 }"
    >
      <template #emptyText>
        <a-empty description="暂无数据" />
      </template>

      <template #headerCell="{ column }">
        <template v-if="column.key === 'id'">
          <span>id</span>
        </template>
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'id'">
          <div style="width: 150px">{{ record.id }}</div>
        </template>

        <template v-else-if="column.key === 'ruleName'">
          <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '110px' }">
            <a-descriptions-item label="规则名称">
              <a-tooltip placement="top" v-if="!record.isRemarkShow">
                <template #title>
                  <span>{{ record.ruleName }}</span>
                </template>
                <span class="hiddenText">{{ record.ruleName }}</span>
                <a @click="copyRule(record.id)"><CopyOutlined /></a>
              </a-tooltip>
            </a-descriptions-item>

            <a-descriptions-item label="影院名匹配">
              <div v-if="record.cinemaNameType == 1">精准匹配</div>
              <div v-if="record.cinemaNameType == 2">模糊匹配</div>
            </a-descriptions-item>

            <!-- <a-descriptions-item label="2/3D">
              <span>{{ edit23D(record.customFilmType) }}</span>
            </a-descriptions-item> -->

            <a-descriptions-item label="开关状态">
              <div v-if="record.ruleStatus == 0">
                <span
                  style="
                    width: 6px;
                    height: 6px;
                    background-color: red;
                    display: inline-block;
                    border-radius: 50%;
                  "
                ></span>
                已停用
              </div>
              <div v-if="record.ruleStatus == 1">
                <span
                  style="
                    width: 6px;
                    height: 6px;
                    background-color: #01ff01;
                    display: inline-block;
                    border-radius: 50%;
                  "
                ></span>
                已启用
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="更新时间">
              {{ timeFormat(record.updateTime) }}
            </a-descriptions-item>
          </a-descriptions>
        </template>

        <template v-else-if="column.key === 'planType'">
          <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '120px' }">
            <!-- 2/3d - 新 -->
            <a-descriptions-item label="包含影片类型">
              <a-tooltip placement="top" v-if="getFilterlist(record.planTypeList, 1).length > 0">
                <template #title>
                  <template v-for="item in record.planTypeList">
                    <a-tag v-if="item.containStatus == 1" color="blue">
                      {{ item.name }}
                    </a-tag>
                  </template>
                </template>
                <div class="hiddenText">
                  <template v-for="item in record.planTypeList">
                    <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                  </template>
                </div>
              </a-tooltip>
              <div v-else>不限制</div>
            </a-descriptions-item>

            <a-descriptions-item label="排除影片类型">
              <a-tooltip placement="top" v-if="getFilterlist(record.planTypeList, 0).length > 0">
                <template #title>
                  <template v-for="item in record.planTypeList">
                    <a-tag v-if="item.containStatus == 0" color="blue">
                      {{ item.name }}
                    </a-tag>
                  </template>
                </template>
                <div class="hiddenText">
                  <template v-for="item in record.planTypeList">
                    <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                  </template>
                </div>
              </a-tooltip>
              <div v-else>不限制</div>
            </a-descriptions-item>
            <!-- 2/3d - 新 -->
            <a-descriptions-item label="报价调整类型">
              <div v-if="record.finalPriceAdjustType == 0">不调整</div>
              <div v-if="record.finalPriceAdjustType == 1">四舍五入到整数元</div>
              <div v-if="record.finalPriceAdjustType == 2">四舍五入到元-0.1</div>
              <div v-if="record.finalPriceAdjustType == 3">到0.5/整数元</div>
            </a-descriptions-item>
          </a-descriptions>
        </template>

        <template v-else-if="column.key === 'matchChannel'">
          <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '140px' }">
            <a-descriptions-item label="首选渠道">
              <a-tag color="blue" v-if="record.matchChannel == 3">麻花电影票（可限价）</a-tag>
              <a-tag color="blue" v-if="record.matchChannel == 5">芒果电影票（一口价）</a-tag>
              <a-tag color="blue" v-if="record.matchChannel == 6">哈哈电影票</a-tag>
              <a-tag color="blue" v-if="record.matchChannel == 11">守兔电影票（一口价）</a-tag>
              <a-tag color="blue" v-if="record.matchChannel == 7">守兔电影票（可限价）</a-tag>
              <a-tag color="blue" v-if="record.matchChannel == 8">星驰电影票（一口价）</a-tag>
              <a-tag color="blue" v-if="record.matchChannel == 9">哈哈电影快票（固定9折）</a-tag>
              <a-tag color="blue" v-if="record.matchChannel == 10">影划算电影票（可限价）</a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="备选渠道">
              <a-tag color="blue" v-if="record.slaveMatchChannel == 3">麻花电影票（可限价）</a-tag>
              <a-tag color="blue" v-if="record.slaveMatchChannel == 5">芒果电影票（一口价）</a-tag>
              <a-tag color="blue" v-if="record.slaveMatchChannel == 6">哈哈电影票</a-tag>
              <a-tag color="blue" v-if="record.slaveMatchChannel == 11">守兔电影票（一口价）</a-tag>
              <a-tag color="blue" v-if="record.slaveMatchChannel == 7">守兔电影票（可限价）</a-tag>
              <a-tag color="blue" v-if="record.slaveMatchChannel == 8">星驰电影票（一口价）</a-tag>
              <a-tag color="blue" v-if="record.slaveMatchChannel == 9">
                哈哈电影快票（固定9折）
              </a-tag>
              <a-tag color="blue" v-if="record.slaveMatchChannel == 10">
                影划算电影票（可限价）
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="是否开启限价">
              <a-tag color="blue" v-if="record.enableLimitPrice == 0">不启用</a-tag>
              <a-tag color="blue" v-if="record.enableLimitPrice == 1">启用</a-tag>
            </a-descriptions-item>
          </a-descriptions>
        </template>

        <template v-else-if="column.key === 'province'">
          <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
            <a-descriptions-item label="包含省份">
              <a-tooltip placement="top" v-if="getFilterlist(record.provinceList, 1).length > 0">
                <template #title>
                  <template v-for="item in record.provinceList">
                    <a-tag v-if="item.containStatus == 1" color="blue">
                      {{ item.name }}
                    </a-tag>
                  </template>
                </template>
                <div class="hiddenText">
                  <template v-for="item in record.provinceList">
                    <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                  </template>
                </div>
              </a-tooltip>
              <div v-else>不限制</div>
            </a-descriptions-item>

            <a-descriptions-item label="排除省份">
              <a-tooltip placement="top" v-if="getFilterlist(record.provinceList, 0).length > 0">
                <template #title>
                  <template v-for="item in record.provinceList">
                    <a-tag v-if="item.containStatus == 0" color="blue">
                      {{ item.name }}
                    </a-tag>
                  </template>
                </template>
                <div class="hiddenText">
                  <template v-for="item in record.provinceList">
                    <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                  </template>
                </div>
              </a-tooltip>
              <div v-else>不限制</div>
            </a-descriptions-item>

            <a-descriptions-item label="包含城市">
              <a-tooltip placement="top" v-if="getFilterlist(record.cityList, 1).length > 0">
                <template #title>
                  <template v-for="item in record.cityList">
                    <a-tag v-if="item.containStatus == 1" color="blue">
                      {{ item.name }}
                    </a-tag>
                  </template>
                </template>
                <div class="hiddenText">
                  <template v-for="item in record.cityList">
                    <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                  </template>
                </div>
              </a-tooltip>
              <div v-else>不限制</div>
            </a-descriptions-item>

            <a-descriptions-item label="排除城市">
              <a-tooltip placement="top" v-if="getFilterlist(record.cityList, 0).length > 0">
                <template #title>
                  <template v-for="item in record.cityList">
                    <a-tag v-if="item.containStatus == 0" color="blue">
                      {{ item.name }}
                    </a-tag>
                  </template>
                </template>
                <div class="hiddenText">
                  <template v-for="item in record.cityList">
                    <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                  </template>
                </div>
              </a-tooltip>
              <div v-else>不限制</div>
            </a-descriptions-item>
          </a-descriptions>
        </template>

        <template v-else-if="column.key === 'fileHall'">
          <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
            <a-descriptions-item label="包含影院">
              <a-tooltip placement="top" v-if="getFilterlist(record.cinemaList, 1).length > 0">
                <template #title>
                  <template v-for="item in record.cinemaList">
                    <a-tag v-if="item.containStatus == 1" color="blue">
                      {{ item.name }}
                    </a-tag>
                  </template>
                </template>
                <div class="hiddenText">
                  <template v-for="item in record.cinemaList">
                    <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                  </template>
                </div>
              </a-tooltip>
              <div v-else>不限制</div>
            </a-descriptions-item>

            <a-descriptions-item label="排除影院">
              <a-tooltip placement="top" v-if="getFilterlist(record.cinemaList, 0).length > 0">
                <template #title>
                  <template v-for="item in record.cinemaList">
                    <a-tag v-if="item.containStatus == 0" color="blue">
                      {{ item.name }}
                    </a-tag>
                  </template>
                </template>
                <div class="hiddenText">
                  <template v-for="item in record.cinemaList">
                    <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                  </template>
                </div>
              </a-tooltip>
              <div v-else>不限制</div>
            </a-descriptions-item>

            <a-descriptions-item label="包含影厅">
              <a-tooltip placement="top" v-if="getFilterlist(record.filmHallList, 1).length > 0">
                <template #title>
                  <template v-for="item in record.filmHallList">
                    <a-tag v-if="item.containStatus == 1" color="blue">
                      {{ item.name }}
                    </a-tag>
                  </template>
                </template>
                <div class="hiddenText">
                  <template v-for="item in record.filmHallList">
                    <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                  </template>
                </div>
              </a-tooltip>
              <div v-else>不限制</div>
            </a-descriptions-item>

            <a-descriptions-item label="排除影厅">
              <a-tooltip placement="top" v-if="getFilterlist(record.filmHallList, 0).length > 0">
                <template #title>
                  <template v-for="item in record.filmHallList">
                    <a-tag v-if="item.containStatus == 0" color="blue">
                      {{ item.name }}
                    </a-tag>
                  </template>
                </template>
                <div class="hiddenText">
                  <template v-for="item in record.filmHallList">
                    <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                  </template>
                </div>
              </a-tooltip>
              <div v-else>不限制</div>
            </a-descriptions-item>
          </a-descriptions>
        </template>

        <template v-else-if="column.key === 'filmName'">
          <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
            <a-descriptions-item label="包含影片">
              <a-tooltip placement="top" v-if="getFilterlist(record.filmList, 1).length > 0">
                <template #title>
                  <template v-for="item in record.filmList">
                    <a-tag v-if="item.containStatus == 1" color="blue">
                      {{ item.name }}
                    </a-tag>
                  </template>
                </template>
                <div class="hiddenText">
                  <template v-for="item in record.filmList">
                    <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                  </template>
                </div>
              </a-tooltip>
              <div v-else>不限制</div>
            </a-descriptions-item>

            <a-descriptions-item label="排除影片">
              <a-tooltip placement="top" v-if="getFilterlist(record.filmList, 0).length > 0">
                <template #title>
                  <template v-for="item in record.filmList">
                    <a-tag v-if="item.containStatus == 0" color="blue">
                      {{ item.name }}
                    </a-tag>
                  </template>
                </template>
                <div class="hiddenText">
                  <template v-for="item in record.filmList">
                    <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                  </template>
                </div>
              </a-tooltip>
              <div v-else>不限制</div>
            </a-descriptions-item>

            <a-descriptions-item label="票数">
              <div v-if="record.seatCount == '0'">不限制</div>
              <div v-else>{{ record.seatCount }}张</div>
            </a-descriptions-item>

            <a-descriptions-item label="包含院线">
              <a-tooltip placement="top" v-if="getFilterlist(record.lineList, 1).length > 0">
                <template #title>
                  <template v-for="item in record.lineList">
                    <a-tag v-if="item.containStatus == 1" color="blue">
                      {{ item.name }}
                    </a-tag>
                  </template>
                </template>
                <div class="hiddenText">
                  <template v-for="item in record.lineList">
                    <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                  </template>
                </div>
              </a-tooltip>
              <div v-else>不限制</div>
            </a-descriptions-item>
          </a-descriptions>
        </template>

        <template v-else-if="column.key === 'beginShowTime'">
          <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
            <a-descriptions-item label="放映日期">
              <div v-if="record.beginLimitTime != '0'">
                {{ timeFormatYMD(record.beginLimitTime) }} ~
                {{ timeFormatYMD(record.endLimitTime) }}
              </div>
              <div v-else>不限制</div>
            </a-descriptions-item>
            <a-descriptions-item label="放映时间">
              <div>{{ record.beginTime }} - {{ record.endTime }}</div>
            </a-descriptions-item>
            <a-descriptions-item label="星期">
              <span v-if="record.week == '0'">全部</span>
              <span v-else v-for="(item, index) in record.week.split(',')">周{{ item }},</span>
            </a-descriptions-item>

            <a-descriptions-item label="排除院线">
              <a-tooltip placement="top" v-if="getFilterlist(record.lineList, 0).length > 0">
                <template #title>
                  <template v-for="item in record.lineList">
                    <a-tag v-if="item.containStatus == 0" color="blue">
                      {{ item.name }}
                    </a-tag>
                  </template>
                </template>
                <div class="hiddenText">
                  <template v-for="item in record.lineList">
                    <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                  </template>
                </div>
              </a-tooltip>
              <div v-else>不限制</div>
            </a-descriptions-item>
          </a-descriptions>
        </template>

        <template v-else-if="column.key === 'price'">
          <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '110px' }">
            <a-descriptions-item label="猫淘价区间">
              <div>
                {{ toYuan(record.marketPriceBegin) }} ~
                {{ toYuan(record.marketPriceEnd) }}
              </div>
            </a-descriptions-item>

            <a-descriptions-item label="报价方式">
              <span v-if="record.quotationType == 1">比例加减</span>
              <span v-if="record.quotationType == 2">猫淘价减法</span>
              <span v-if="record.quotationType == 3">固定金额</span>
              <span v-if="record.quotationType == 4">溢价模式</span>
            </a-descriptions-item>

            <a-descriptions-item label="报价金额">
              <span v-if="record.quotationType == 1">
                【猫淘价 * {{ record.quotationPercent }}%】
                <span style="color: #18d818" v-if="record.quotationDiscount >= 0">
                  +{{ toYuan(record.quotationDiscount) }}
                </span>
                <span style="color: red" v-else>{{ toYuan(record.quotationDiscount) }}</span>
              </span>
              <span v-if="record.quotationType == 2">
                【猫淘价】
                <span style="color: red">{{ toYuan(record.quotationDiscount) }}</span>
              </span>
              <span v-if="record.quotationType == 3">
                {{ toYuan(record.quotationDiscount) }}
              </span>
              <span v-if="record.quotationType == 4">
                {{ toYuan(record.quotationDiscount) }} + 【溢价部分】
              </span>
            </a-descriptions-item>

            <a-descriptions-item label="单张限价">
              <div v-if="record.limitPrice < 0">【报价】 + {{ (0 - record.limitPrice) / 100 }}</div>
              <div v-if="record.limitPrice > 0">【报价】 - {{ record.limitPrice / 100 }}</div>
            </a-descriptions-item>
          </a-descriptions>
        </template>

        <template v-else-if="column.key === 'action'">
          <div style="display: flex; align-items: center">
            <!-- <a-switch v-model:checked="record.ruleStatus" @change="handleChangeRules(record)" /> -->
            <div style="width: 20px"></div>

            <div style="width: 100px">
              <a-popconfirm
                title="确定删除？"
                ok-text="是"
                cancel-text="否"
                @confirm="delRule(record.id)"
              >
                <a>删 除</a>
              </a-popconfirm>
              <a style="margin-left: 10px" @click="edit(record)">修 改</a>
            </div>
          </div>
        </template>
      </template>
    </a-table>

    <!-- 推送 -->
  </a-card>
</template>

<style lang="less" scoped>
.hiddenText {
  display: inline-block;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 16px;
}

.searchBox {
  margin-bottom: 10px;
  display: flex;

  input {
    width: 200px;
    margin-right: 10px;
  }

  button {
    margin-right: 10px;
  }
}

a:hover {
  color: red;
}
</style>
